<template>
  <el-dialog
    class="personnel-details-model"
    :close-on-click-modal="false"
    :visible="visible"
    width="1280px"
    :before-close="handleCancel">
    <div class="detail-container">
      <ul class="tabs">
        <li :class="activeId === '0' ? 'active' : ''" @click="handleClick('0')">
          工人档案
        </li>
        <li :class="activeId === '1' ? 'active' : ''" @click="handleClick('1')">
          资格证书（0）
        </li>
        <li :class="activeId === '2' ? 'active' : ''" @click="handleClick('2')">
          进出场信息
        </li>
        <li :class="activeId === '3' ? 'active' : ''" @click="handleClick('3')">
          安全教育
        </li>
        <li :class="activeId === '4' ? 'active' : ''" @click="handleClick('4')">
          考勤记录
        </li>
        <li :class="activeId === '5' ? 'active' : ''" @click="handleClick('5')">
          不良记录
        </li>
      </ul>
    </div>
    <div class="table-content">
      <table
        class="table-box"
        border="1"
        cellspacing="0"
        cellpadding="5">
        <tr class="info">
          <td class="img" rowspan="3">
            <img style="width: 100px;height: 100px;" src="../../../assets/images/sun.png">
          </td>
          <td width="100">姓名</td>
          <td>火山</td>
          <td width="100">性别</td>
          <td>女</td>
          <td width="100">所属单位</td>
          <td>研究院</td>
          <td class="img" rowspan="3">
            <img style="width: 100px;height: 100px;" src="../../../assets/images/sun.png"/>
          </td>
        </tr>
      </table>
<!--      <iframe style="display: none;" width="100%" name="frameId"></iframe>-->
      <!--<table
        class="table-box"
        border="1"
        cellspacing="0"
        cellpadding="5"
        style="width: 100%;border-collapse: collapse; border-spacing: 0;">
        <tr class="row" style="width: 100%;height: 40px;">
          <td colspan="8" style="width: 100%;height: 40px;">
            <div class="row_content">
              <span class="title">工人档案</span>
&lt;!&ndash;              <el-button type="primary" size="mini" @click="handlePrint">打印</el-button>&ndash;&gt;
            </div>
          </td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td class="img" rowspan="3">
            <img style="width: 100px;height: 100px;" src="../../../assets/images/sun.png">
          </td>
          <td width="100">姓名</td>
          <td>火山</td>
          <td width="100">性别</td>
          <td>女</td>
          <td width="100">所属单位</td>
          <td>研究院</td>
          <td class="img" rowspan="3">
            <img style="width: 100px;height: 100px;" src="../../../assets/images/sun.png"/>
          </td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td >年龄</td>
          <td>18</td>
          <td >宿舍</td>
          <td>205</td>
          <td >班组</td>
          <td>电子部</td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td >工种</td>
          <td></td>
          <td >工号</td>
          <td></td>
          <td >身份证ID</td>
          <td>250250250250250250</td>
        </tr>
        <tr class="row" style="width: 100%;height: 40px;">
          <td colspan="8">
            <div class="row_content">
              <span class="title">详细信息</span>
            </div>
          </td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td>民族</td>
          <td>汉族</td>
          <td>出生日期</td>
          <td colspan="2">1995-04-27</td>
          <td>住址</td>
          <td colspan="2">杭州市余杭区金星</td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td>联系方式</td>
          <td></td>
          <td>籍贯</td>
          <td colspan="2">泉州</td>
          <td>银行卡号</td>
          <td colspan="2">250250250250250250</td>
        </tr>
        <tr class="info" style="width: 100%;height: 40px;">
          <td>紧急联系人</td>
          <td></td>
          <td>紧急联系方式</td>
          <td colspan="2"></td>
          <td></td>
          <td colspan="2"></td>
        </tr>
        <tr class="row" style="width: 100%;height: 40px;">
          <td colspan="8">
            <div class="row_content">
              <span class="title">资格证书</span>
              <el-button type="primary" size="mini">新增</el-button>
            </div>
          </td>
        </tr>
        <tr style="width: 100%;height: 40px;">
          <td colspan="8">
            <div class="table">
              <table
                border="1"
                cellspacing="0"
                cellpadding="3"
                style="width: 100%;border-collapse: collapse; border-spacing: 0;">
                <tr style="width: 100%;height: 40px;">
                  <td>证书名称</td>
                  <td>证书编号</td>
                  <td>技能等级</td>
                  <td>发证日期</td>
                  <td>有效期</td>
                  <td>发证机关</td>
                  <td>附件</td>
                </tr>
                <tr style="width: 100%;height: 40px;">
                  <td>祖安代表</td>
                  <td>XXXXXXXXXX</td>
                  <td>高级</td>
                  <td>2020-02-20</td>
                  <td>2022-03-21</td>
                  <td>XXXXXXXXXXXXXXXX</td>
                  <td>附件</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>-->
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeId: '0'
    };
  },
  methods: {
    /**
     * 切换tab
     * @param type {String} 切换类型
     */
    handleClick(type) {
      this.activeId = type;
    },
    /**
     * 设置打印
     */
    handlePrint() {
      const iframeEl = document.querySelector('iframe[name="frameId"]');
      const tableHtml = document.querySelector('.table-box');
      const html = tableHtml.cloneNode(true);
      const nodeList = html && html.querySelectorAll('.el-button');
      if (nodeList.length) { // 删除按钮
        for (let i = 0; i < nodeList.length; i++) {
          const dom = nodeList[i];
          dom.parentNode && dom.parentNode.removeChild(dom);
        }
      }
      iframeEl.contentDocument.body.appendChild(html);
      iframeEl.contentWindow.print();
      iframeEl.contentDocument.body.innerHTML = '';
    },
    // 取消、关闭
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .personnel-details-model {
    overflow: hidden;
    .table-content {
      width: 100%;
      min-height: 600px;
      padding: 10px 20px;
      color: #fff;
      .table-box {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        tr {
          width: 100%;
          height: 40px;
          td {
            padding: 5px 20px;
            &.img {
              img {
                width: 100px;
                height: 100px;
                display: inline-block;
              }
            }
            &.key {
              width: 100px;
            }
          }
          .table {
            width: 100%;
            table {
              width: 100%;
            }
          }
        }
        .row {
          background-color: $baseBg;
          .row_content {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
</style>
